
import React from "react";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex, message } from 'antd';
import { useNavigate } from "react-router-dom";
import styles from './login.module.scss';
// import userImg from '../../assets/user.png';
import { loginSys } from "@/common/api"
import { encrypt } from "@/utils/index"



const Login: React.FC = () => {
    const navigate = useNavigate();


    const onFinish = (values: any) => {
        delete values.remember

        values.password = encrypt(values.password)
        loginSys(values).then((res: any) => {
            if (res.success) {
                message.success(res.message)
                navigate('/user/account')
                localStorage.setItem('userInfo', JSON.stringify(res.data))
            } else {
                message.error(res.message)
            }
        })

    };
    return <>
        <div className={styles.main} >
            <div className={styles.common}>
                <div className={styles.text}>
                    {/* <img className={styles.titleimg} src={titleImg} alt="" /> */}
                    运输智能规划平台系统
                </div>
                <div className={styles.login}>
                    <div>
                        {/* <img
                            style={{ width: "54px", height: "54px" }}
                            src={userImg}
                            alt=""
                        /> */}
                        <UserOutlined style={{ color: '#0d6eb3', fontSize: '40px' }} />
                    </div>
                    <div className={styles.form}>
                        <Form
                            size="large"
                            name="login"
                            initialValues={{ remember: false, userName: 'admin', password: 'Hq5PnavDl@7D' }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="userName"
                                rules={[{ required: true, message: '请输入用户名' }]}
                            >
                                <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: '请输入密码' }]}
                                className={styles.item}
                            >
                                <Input.Password prefix={<LockOutlined />} type="password" placeholder="请输入密码" />
                            </Form.Item>
                            <Form.Item className={styles.item}>
                                <Flex justify="space-between" align="center">
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox>记住账号密码</Checkbox>
                                    </Form.Item>
                                </Flex>
                            </Form.Item>

                            <Form.Item>
                                <Button block type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div >
    </>
}


export default Login